<template>
	<div class="newPage-chooseBank">
		<x-header :left-options="{backText: ''}" class="head">选择银行卡</x-header>
		<ul class="bank-list">
			<li v-for="item in bankList" class="ok">
				<img v-lazy="item.imgUrl" class="bank-icon"/>
				<div class="bank-type">
					<dl>
						<dt>{{item.title}}</dt>
						<dd>储蓄卡</dd>
					</dl>
					<span>**** **** **** 0899</span>
				</div>
			</li>
		</ul>
		<div class="add-card">
			<img src="../../assets/msg-imgs/msh_add_card.png" />
			<span>添加新的银行卡</span>
		</div>
		<div>
			<button class="btn-next">下一步</button>
		</div>
	</div>
</template>

<script>
	import { XHeader, XInput, Group, Cell, XButton, Alert } from 'vux'
	export default {
		components: {
	      XHeader,
	      XInput,
	      Group,
	      Cell,
	      XButton,
	      Alert
	    },
	    created(){
	      document.title = '马上花';
	    },
	    data () {
	      return {
	        show: true,
	        bankList: [
	        	{
	        		imgUrl: require("../../assets/msg-imgs/ABC.png"),
	        		title: '中国农业银行',
	        		id: '50023419901219908x'
	        	},
	        	{
	        		imgUrl: require("../../assets/msg-imgs/BCM.png"),
	        		title: '交通银行',
	        		id: '50023419901219908x'
	        	},
	        	{
	        		imgUrl: require("../../assets/msg-imgs/BOC.png"),
	        		title: '中国银行',
	        		id: '50023419901219908x'
	        	},
	        	{
	        		imgUrl: require("../../assets/msg-imgs/CCB.png"),
	        		title: '中国建设银行',
	        		id: '50023419901219908x'
	        	},
	        	{
	        		imgUrl: require("../../assets/msg-imgs/CIB.png"),
	        		title: '兴业银行',
	        		id: '50023419901219908x'
	        	},
	        	{
	        		imgUrl: require("../../assets/msg-imgs/CITIC.png"),
	        		title: '中信银行',
	        		id: '50023419901219908x'
	        	},
	        	{
	        		imgUrl: require("../../assets/msg-imgs/GDB.png"),
	        		title: '广东发展银行',
	        		id: '50023419901219908x'
	        	},
	        	{
	        		imgUrl: require("../../assets/msg-imgs/ICBC.png"),
	        		title: '中国工商银行',
	        		id: '50023419901219908x'
	        	}
	        ]
	      }
	    },
	    methods: {
	    	onHide () {
		      console.log('on hide')
		    },
		    onShow () {
		      this.$set(this.$data, 'show', true)
		    }
	    }
	}
</script>

<style lang="less">
	@import '../styles/main.less';
	.newPage-chooseBank {
		.head {
			background: #F8F8F8;
			h1 {
				color: #030303;
				font-size: .4rem;
			}

		}
		.bank-list {
			margin-top: .2rem;
			li {
				width: 6.3rem;
				height: 1.4rem;
				background-color: #FD6464;
				border-radius: .08rem;
				margin: 0 auto .2rem;
				padding: .3rem;
				position: relative;
				&.ok {
					background-image: url('../../assets/msg-imgs/status_ok.png');
					background-repeat: no-repeat;
					background-size: 1.05rem 1.05rem;
					background-position: 5.5rem center;
				}
				img.bank-icon {
					width: .75rem;
					vertical-align: top;
				}
				.bank-type {
					display: inline-block;
					margin-left: .2rem;
					dl {
						color: #fff;
						margin: 0;
						dt {
							font-size: .32rem;
						}
						dd {
							margin: 0;
							font-size: .24rem;
						}
					}
					span {
						color: #fff;
						font-size: .36rem;
						display: block;
						margin-top: .1rem;
					}
				}
			}
		}
		.add-card {
			width: 6.9rem;
			height: 2rem;
			background: #fff;
			border: 1px dashed #ccc;
			border-radius: .08rem;
			line-height: 2rem;
			margin: 0 auto .2rem;
			text-align: center;
			color:#999;
			img, span {
				vertical-align: middle;
			}
		}
		
	}
</style>